<script lang="ts">
import { computed, defineComponent, ref, type PropType } from "vue";
import { upload_up } from "@/api/upload";
import { chooseMedia } from "@/utils/meida";
import { Toast } from "@/utils/toast";

import FormCheckbox from "@/components/form/checkbox.vue";
import FormPicker from "@/components/form/picker.vue";
import EditUploadBtn from "./edit-upload-btn.vue";
import EditMenuTitle from "./edit-menu-title.vue";
import EditImgList from "./edit-img-list.vue";
import PopupBottom from "@/components/popup/bottom.vue";
import FormButton from "@/components/form/button.vue";

export default defineComponent({
  components: {
    FormCheckbox,
    FormPicker,
    EditUploadBtn,
    EditMenuTitle,
    EditImgList,
    PopupBottom,
    FormButton,
  },
  props: {
    formId: { type: Number, required: true },
    modelValue: { type: Object, required: true },
    levelData: { type: Array, required: true },
    languageData: { type: Array as PropType<any[]>, required: true },
    exampleImg: String,
  },
  setup(props) {
    const levelClick = (id: number) => {
      props.modelValue.guider_level = id;
    };

    const languageIndex = computed({
      get() {
        return props.languageData.findIndex(
          (i) => i.id === props.modelValue.language_arr
        );
      },
      set(index) {
        props.modelValue.language_arr = props.languageData[index].id;
      },
    });

    const imgClick = () => {
      chooseMedia({ count: 1, mediaType: ["image"] }, (resp) => {
        Toast.showLoading();
        upload_up(resp[0].tempFilePath, { type: 2 })
          .then((resp) => {
            props.modelValue.guider_pic = resp[0].url;
            Toast.hideLoading();
          })
          .catch(() => Toast.hideLoading());
      });
      exampleVisible.value = false;
    };

    const btnVisible = ref(false);

    const exampleVisible = ref(false);
    const exampleClick = (index: number) => {
      btnVisible.value = index === -1;
      exampleVisible.value = true;
    };

    return {
      levelClick,
      languageIndex,
      imgClick,
      btnVisible,
      exampleVisible,
      exampleClick,
    };
  },
});
</script>

<template>
  <view class="certificate-form">
    <view class="certificate-form-item">
      <view class="certificate-form-label">
        首次取得导游证日期<text class="certificate-form-star">*</text>
      </view>
      <view style="flex-grow: 1; min-width: 0">
        <FormPicker v-model="modelValue.guider_date" mode="date">
          <view class="certificate-form-content">
            <view class="certificate-form-value">
              {{ modelValue.guider_date || "请选择日期" }}
            </view>
            <image
              class="certificate-form-arrow"
              src="@/package/guider/static/apply-edit-arrow.png"
            />
          </view>
        </FormPicker>
      </view>
    </view>
    <view class="certificate-form-line"></view>
    <view class="certificate-form-item">
      <view class="certificate-form-label">
        导游证号<text class="certificate-form-star">*</text>
      </view>
      <view class="certificate-form-content">
        <input
          class="certificate-form-input"
          v-model="modelValue.guider_no"
          placeholder="请填写导游证号"
        />
      </view>
    </view>
    <view class="certificate-form-line"></view>
    <view class="certificate-form-item">
      <view class="certificate-form-label">
        导游级别<text class="certificate-form-star">*</text>
      </view>
      <view class="certificate-form-content" style="margin-left: 0">
        <view
          class="certificate-form-checkbox"
          v-for="i of levelData"
          :key="i.id"
          @click="levelClick(i.id)"
        >
          <FormCheckbox :modelValue="modelValue.guider_level === i.id" />
          &nbsp;{{ i.name }}
        </view>
      </view>
    </view>
    <view class="certificate-form-line"></view>
    <template v-if="formId === 8 || formId === 10 || formId === 11">
      <view class="certificate-form-item">
        <view class="certificate-form-label">
          导游语种<text class="certificate-form-star">*</text>
        </view>
        <view style="flex-grow: 1; min-width: 0">
          <FormPicker
            v-model="languageIndex"
            :range="languageData"
            rangeKey="name"
          >
            <view class="certificate-form-content">
              <view class="certificate-form-value">
                {{
                  languageIndex === -1
                    ? "请选择导游语种"
                    : languageData[languageIndex].name
                }}
              </view>
              <image
                class="certificate-form-arrow"
                src="@/package/guider/static/apply-edit-arrow.png"
              />
            </view>
          </FormPicker>
        </view>
      </view>
      <view class="certificate-form-line"></view>
    </template>

    <template v-if="formId === 8">
      <view class="certificate-form-item">
        <view class="certificate-form-label">
          研学导师证书编号<text class="certificate-form-star">*</text>
        </view>
        <view class="certificate-form-content">
          <input
            class="certificate-form-input"
            v-model="modelValue.tutor_no"
            placeholder="请填写证书编号"
          />
        </view>
      </view>
      <view class="certificate-form-line"></view>
      <view class="certificate-form-item">
        <view class="certificate-form-label">
          获证日期<text class="certificate-form-star">*</text>
        </view>
        <view style="flex-grow: 1; min-width: 0">
          <FormPicker v-model="modelValue.tutor_date" mode="date">
            <view class="certificate-form-content">
              <view class="certificate-form-value">
                {{ modelValue.tutor_date || "请选择日期" }}
              </view>
              <image
                class="certificate-form-arrow"
                src="@/package/guider/static/apply-edit-arrow.png"
              />
            </view>
          </FormPicker>
        </view>
      </view>
      <view class="certificate-form-line"></view>
      <view class="certificate-form-img">
        <EditImgList
          :listData="modelValue.tutor_pics"
          title="认证资料"
          required
          desc="请上传研学导师及相关证件（或相关从业证明）"
        />
      </view>
    </template>
    <template v-else-if="formId === 11">
      <view class="certificate-form-item">
        <view class="certificate-form-label">
          首次获得领队证日期<text class="certificate-form-star">*</text>
        </view>
        <view style="flex-grow: 1; min-width: 0">
          <FormPicker v-model="modelValue.leader_date" mode="date">
            <view class="certificate-form-content">
              <view class="certificate-form-value">
                {{ modelValue.leader_date || "请选择日期" }}
              </view>
              <image
                class="certificate-form-arrow"
                src="@/package/guider/static/apply-edit-arrow.png"
              />
            </view>
          </FormPicker>
        </view>
      </view>
      <view class="certificate-form-line"></view>
      <view class="certificate-form-item">
        <view class="certificate-form-label">
          领队证编号<text class="certificate-form-star">*</text>
        </view>
        <view class="certificate-form-content">
          <input
            class="certificate-form-input"
            v-model="modelValue.leader_no"
            placeholder="请填写证书编号"
          />
        </view>
      </view>
      <view class="certificate-form-line"></view>
      <view class="certificate-form-img">
        <EditImgList
          :listData="modelValue.leader_pics"
          title="认证资料"
          required
          desc="请上传导游证及领队证"
        />
      </view>
    </template>
    <template v-else>
      <view class="certificate-form-title">
        <EditMenuTitle title="导游证" required />
        <view class="certificate-form-example" @click="exampleClick">
          <image
            class="certificate-form-example2"
            src="@/package/guider/static/apply-type-question.png"
          />
          示例
        </view>
      </view>
      <view class="certificate-form-upload">
        <view @click="exampleClick(-1)">
          <EditUploadBtn :modelValue="modelValue.guider_pic" />
        </view>
      </view>
    </template>
  </view>

  <template v-if="exampleImg">
    <PopupBottom v-model="exampleVisible" title="照片示例" :showClose="false">
      <view class="certificate-example">
        <view class="certificate-example-desc">提交相关证明需漏出本人姓名</view>
        <image
          class="certificate-example-img"
          :src="exampleImg"
          mode="widthFix"
        />
        <view class="certificate-example-btn" v-if="btnVisible">
          <view style="flex-grow: 1" @click="imgClick">
            <FormButton>我知道啦！去上传</FormButton>
          </view>
        </view>
      </view>
    </PopupBottom>
  </template>
</template>

<style lang="scss">
.certificate-form {
  border-radius: 0 0 20rpx 20rpx;
  background-color: #fcfcfc;

  .certificate-form-item {
    display: flex;
    align-items: center;
    min-height: 72rpx;
    padding: 14rpx 60rpx 14rpx 30rpx;
  }

  .certificate-form-label {
    flex-shrink: 0;
    font-size: 28rpx;
    color: #666666;
    line-height: 40rpx;
  }

  .certificate-form-star {
    color: #e55d5d;
  }

  .certificate-form-content {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-grow: 1;
    min-width: 0;
    margin-left: 20rpx;
  }

  .certificate-form-arrow {
    flex-shrink: 0;
    width: 24rpx;
    height: 24rpx;
    margin-left: 20rpx;
  }

  .certificate-form-line {
    margin: 0 30rpx;
    border-bottom: 2rpx solid #dddddd;
  }

  .certificate-form-input,
  .certificate-form-checkbox,
  .certificate-form-value {
    font-size: 30rpx;
    color: #333333;
    line-height: 42rpx;
    text-align: right;
  }

  .certificate-form-input {
    flex-grow: 1;
    min-width: 0;
  }

  .certificate-form-checkbox {
    display: flex;
    align-items: center;
    margin-left: 20rpx;
  }

  .certificate-form-title {
    display: flex;
    align-items: center;
    padding: 28rpx 30rpx 34rpx 30rpx;
  }

  .certificate-form-example {
    display: flex;
    align-items: center;
    margin-left: 20rpx;
    font-size: 28rpx;
    color: #999999;
    line-height: 40rpx;
  }

  .certificate-form-example2 {
    width: 36rpx;
    height: 36rpx;
    margin-right: 10rpx;
  }

  .certificate-form-upload {
    padding: 0 110rpx 40rpx;
  }

  .certificate-form-img {
    padding-top: 34rpx;
  }
}

.certificate-example {
  padding-bottom: 1rpx;

  .certificate-example-desc {
    margin-bottom: 60rpx;
    font-size: 24rpx;
    color: #999999;
    line-height: 36rpx;
    text-align: center;
  }

  .certificate-example-img {
    display: block;
    width: 582rpx;
    margin: 0 auto 80rpx;
  }

  .certificate-example-btn {
    display: flex;
    align-items: center;
    height: 120rpx;
    padding: 0 60rpx;
  }
}
</style>